<template>
  <div>
    <div style='width:100%;height:200px' v-bind:id='id'></div>
    <span>{{ testdata2.name }}</span>
  </div>
</template>

<script>
import Echarts from 'echarts';
var echart1 = null;
export default {
  name: 'test',
  data () {
    return {
      d1: Number(1 === true),
      testdata2: { name: 'haha' }
    };
  },
  props: ['id', 'tdata'],
  methods: {
    getOption (d) {
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} 收入 {c}元 '
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          },
          right: 20
        },
        grid: {
          bottom: 20,
          top: 30,
          left: '3%',
          right: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: d[0]
        },
        yAxis: {
          type: 'value',
          name: '单位/元',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            // formatter: '{value} 元',
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            realtime: true
          }
        ],
        series: [

          {
            // name: 's',
            yAxisIndex: 0,
            type: 'bar',

            itemStyle: {
              normal: {
                color: '#1784ff'
              },
              emphasis: {
                color: '#1784ff',
                shadowBlur: 20,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: '#4ccfff'
              }
            },
            data: d[1]
          }
        ]
      };

      return option;
    }
  },
  mounted () {
    // console.log('组件初始化完毕');
    this.testdata2.name = '';
    echart1 = Echarts.init(document.getElementById(this.id));
  },
  beforeUpdate () {
    // console.log('组件即将改变前触发，常用',this.id,this.tdata);
    // console.log(this.tdata)
    const option = this.getOption(this.tdata);
    if (option) {
      echart1.setOption(option, true);
    }
  },
  watch: {
    tdata: function (d) {
      var option = this.getOption(d);
      echart1.setOption(option, true);
    }
  },
  computed: {
    comp1 () {
      return `${this.d1}`;
    }
  }
};
</script>
